<template>
  <div class='detail-base'>
    <!--返回按钮-->
    <t-button theme='primary' style='margin-bottom: 10px;' @click='$router.back()'>
      <template #icon>
        <ArrowLeftIcon />
      </template>
      返回
    </t-button>
    <t-card title='该活动评分详细信息' :bordered='false'>
      <div class='info-block'>
        <div v-for='(item, index) in baseInfoData' :key='index' class='info-item'>
          <h1>{{ item.name }}</h1>
          <span
            :class="{
              ['inProgress']: item.type && item.type.value === 'inProgress',
              ['pdf']: item.type && item.type.value === 'pdf',
            }"
          >
            <i v-if="item.type && item.type.key === 'contractStatus'" />
            {{ item.value }}
          </span>
        </div>
      </div>
    </t-card>

    <t-card title='活动记录' class='container-base-margin-top' :bordered='false'>
      <t-space>
        <t-space direction='vertical' align='center' v-for='item in imgList'>
          <t-image
            :src='item.url'
            shape='square'
            @click='openImg(item.url)'
            :style="{ width: '300px', height: '200px' }"
            fit='cover'
          />
          <span>{{ item.text }}</span>
        </t-space>


        <div>
          <t-image-viewer v-model:visible='visible' draggable mode='modeless' :images='imgItem'>
            <template #trigger>
              <div class='tdesign-demo-image-viewer__ui-image'>
                <div class='tdesign-demo-image-viewer__ui-image--hover' @click='openImg'>
                </div>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </t-space>
    </t-card>
  </div>
</template>
<script>
import { ArrowLeftIcon, BrowseIcon } from 'tdesign-icons-vue'

export default {
  name: 'DetailBase',
  components: {
    ArrowLeftIcon,
    BrowseIcon
  },
  methods: {
    openImg(imgUrl){
      this.visible = true
      this.curImg = imgUrl
      this.imgItem = [imgUrl]
    }
  },
  data () {
    return {
      curImg:'',
      visible: false,
      imgList: [
        {
          url: 'https://www.hbmzu.edu.cn/__local/2/04/79/C612732D204D782B9AC688170A5_A1E42CB4_40382.jpg',
          text: '对小狗进行检查'
        },
        {
          url: 'https://youth.chzu.edu.cn/_upload/article/images/63/8a/5f960e2947b58823ff4f240fdb42/faed8e47-b48a-48d1-8263-3066415ddd13.jpg',
          text: '喂养小狗'
        },
        {
          url: 'https://ts1.cn.mm.bing.net/th/id/R-C.599656abeb317bf40377bcd89c0bcced?rik=xZUT%2fRsz6G%2fGGw',
          text: '活动集体照'
        }
      ],
      imgItem: [
        'https://ts1.cn.mm.bing.net/th/id/R-C.599656abeb317bf40377bcd89c0bcced?rik=xZUT%2fRsz6G%2fGGw'
      ],
      baseInfoData: [
        {
          'name': '救助活动名称',
          'value': '第十三次田化村救助活动'
        },
        {
          'name': '评分状态',
          'value': '100分 (评分通过)',
          'type': {
            'key': 'contractStatus',
            'value': 'inProgress'
          }
        },
        {
          'name': '救助组织人',
          'value': '陈桦'
        },
        {
          'name': '救助活动编号',
          'value': '13H08ALDS910'
        },
        {
          'name': '救助组织机构',
          'value': '爱益星球救助中心'
        },
        {
          'name': '救助队伍成员',
          'value': '章紫化,陈彭树,刘长纯,张丽'
        },
        {
          'name': '救助活动时间',
          'value': '2024-1-10 至 2024-1-15'
        },
        {
          'name': '救助活动地点',
          'value': '广东省广州市白云区田化村103号'
        },
        {
          'name': '救助内容',
          'value': '提供医疗检查和必要的治疗并为符合条件的小狗进行绝育手术，并进行必要的免疫,提高公众对流浪小狗的关注度，倡导大家关爱动物，尊重生命'
        },
      ]
    }
  }
}
</script>
<style lang='less' scoped>
@import '@/style/variables.less';
@import './imgPreview.css';

.detail-base {
  /deep/ .t-card {
    padding: 8px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }

  &-info-steps {
    padding-top: 12px;
  }
}
.info-block {
  column-count: 1;

  .info-item {
    padding: 12px 0;
    display: flex;
    color: var(--td-text-color-primary);

    h1 {
      width: 200px;
      font: var(--td-font-body-medium);
      color: var(--td-text-color-secondary);
      font-weight: normal;
      text-align: left;

      @media (max-width: @screen-sm-max) {
        width: 100px;
      }

      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        width: 120px;
      }
    }

    span {
      margin-left: 24px;
    }

    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }

    .inProgress {
      color: var(--td-success-color-5);
    }

    .pdf {
      color: var(--td-brand-color);

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.dialog-info-block {
  .info-item {
    padding: 12px 0;
    display: flex;

    h1 {
      width: 84px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: var(--td-text-color-secondary);
      text-align: left;
      line-height: 22px;
    }

    span {
      margin-left: 24px;
    }

    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }

    .green {
      color: var(--td-success-color-5);
    }

    .blue {
      color: var(--td-brand-color);
    }
  }
}

</style>
